<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model use in html tag -->
    <!-- <input type="text" v-model="username"> -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->

    <!-- v-model use in component tag -->
    <!-- <AphasiaInput v-model="username"></AphasiaInput> -->
    <!-- <AphasiaInput :modelValue="username" @update:modelValue="username = $event"></AphasiaInput> -->
    <!-- update v-model -->
    <AphasiaInput v-model:name="username" v-model:psword="password">
    </AphasiaInput>
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import AphasiaInput from "./AphasiaInput.vue";

let username = ref("aphasia");
let password = ref("123456");
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
